<template>
  <div>
    <el-table :data="dormitories" style="width: 100%">
      <el-table-column prop="roomNumber" label="宿舍号"></el-table-column>
      <el-table-column prop="floor" label="楼层"></el-table-column>
      <el-table-column prop="bedCount" label="床位数"></el-table-column>
      <el-table-column prop="availableBeds" label="剩余床位"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="viewStudents(scope.row)" size="small">查看学生</el-button>
          <el-button @click="openMaintenanceDialog(scope.row)" size="small" type="warning">报修</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <el-button @click="openAddDormitoryDialog" type="primary">添加宿舍</el-button>
  </div>
</template>

<script>
export default {
  name: 'DormitoryList',
  data() {
    return {
      dormitories: [
        { id: 101, roomNumber: '101', floor: 1, bedCount: 4, availableBeds: 2 },
        { id: 102, roomNumber: '102', floor: 1, bedCount: 4, availableBeds: 0 }
      ]
    };
  },
  methods: {
    viewStudents(dormitory) {
      this.$alert(`宿舍 ${dormitory.roomNumber} 当前有 ${dormitory.bedCount - dormitory.availableBeds} 人入住`, '学生信息', {
        confirmButtonText: '确定'
      });
    },
    openMaintenanceDialog(dormitory) {
      this.$prompt('请输入维修描述', '宿舍报修', {
        confirmButtonText: '提交',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        this.$message.success('已提交维修申请');
      });
    },
    openAddDormitoryDialog() {
      this.$prompt('请输入宿舍号', '添加宿舍', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        const newDormitory = {
          id: Date.now(),
          roomNumber: value,
          floor: Math.ceil(value / 100),
          bedCount: 4,
          availableBeds: 4
        };
        this.dormitories.push(newDormitory);
        this.$message.success('添加成功');
      });
    }
  }
};
</script>